<template>
  <view class="m-t40">
    <view class="flex">
      <view class="line" />
      <text class="flex-1 text-700-130">最新简历</text>
      <text class="text-400-326">更多</text>
      <image class="square-28 m-l10" src="@/static/images/public/arrow-3.png" />
    </view>

    <scroll-view class="m-t20" scrollX="true" :showScrollbar="false">
      <view class="flex">
        <view
          v-for="item in list"
          :key="item.id"
          class="card flex-d-cl m-r20"
          @click="toResumePage(item)">
          <view class="flex-1 flex p-a20">
            <image class="cover" :src="item.avatar" mode="aspectFill" />
            <view class="flex-1 flex-d-lc m-l20">
              <view class="flex w">
                <text class="flex-1 text-700-130">{{ item.nickname }}</text>
                <text class="text-500-326">10分钟前</text>
              </view>
              <text class="m-t16 text-500-326">{{ item.job.length > 0 ? item.job[0].position : '--' }}</text>
            </view>
          </view>

          <view class="info flex-sb p-h20">
            <view class="flex">
              <image class="square-24" src="@/static/images/home/duration.png" />
              <text class="m-l10 text-400-326">{{ item.work > 0 ? `${item.work}年` : '无经验' }}</text>
            </view>
            <view class="divider" />
            <view class="flex">
              <image class="square-24" src="@/static/images/home/education.png" />
              <text class="m-l10 text-400-326">{{ item.educate.length > 0 ? item.educate[0].title : '--' }}</text>
            </view>
            <view class="divider" />
            <view class="flex">
              <image class="square-24" src="@/static/images/home/location.png" />
              <!-- <text class="m-l10 text-400-326">{{ item.city }} · 青羊区</text> -->
              <text class="m-l10 text-400-326">{{ item.city }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import type { TResume } from '@/types/api.d'

  const list = ref<TResume[]>([])

  const toResumePage = (data: TResume) => {
    uni.setStorage({
      key: 'new_resume_info',
      data: JSON.stringify(data),
      success: () => {
        uni.navigateTo({ url: '/pages/office/resume/resume' })
      },
    })
  }

  const getList = () => {
    uni.$u.get<TResume[]>('/resume/newresume').then((res) => {
      if (res.code === 1) {
        list.value = res.data
      }
    })
  }

  getList()
</script>

<style lang="scss" scoped>
	.line {
		width: 8rpx;
		height: 26rpx;
		margin-right: 20rpx;
		background-color: $bg-color-2;
	}

	.card {
		flex-shrink: 0;
		width: 486rpx;
		height: 220rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;

		.cover {
			width: 102rpx;
			height: 102rpx;
			border-radius: 10rpx;
			border: 1rpx solid $border-color-4;
		}

		.info {
			height: 77rpx;
			border-top: 1px solid $border-color-4;
		}

		.divider {
			width: 1rpx;
			height: 24rpx;
			background-color: #E4E4E4;
		}
	}
</style>
